<template>
  <div class="container">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="switchBox">
      <span style="color333" v-if="state === 'CLOSE'">未启用</span>
      <span class="greenColor" v-else>已启用</span>
      <el-switch
        v-model="state"
        @change="changeState"
        active-color="#009588 "
        inactive-color="#BDC1C6"
        active-value="OPEN"
        :disabled="state === 'OPEN'"
        inactive-value="CLOSE"
      >
      </el-switch>
    </div>
    <div class="mainCon">
      <el-row :gutter="24">
        <el-col
          :sm="24"
          :md="24"
          :lg="12"
          v-for="(item, index) of menuList"
          :key="index"
        >
          <div class="clearfix marketItem">
            <div class="fl itemLeft">
              <img :src="item.img" alt="" />
            </div>
            <div class="fl itemCenter">
              <div class="itemTitle">{{ item.title }}</div>
              <div>{{ item.explain }}</div>
            </div>
            <div
              class="itemRight"
              v-if="item.state === '已启用'"
              @click="seeDetail(item.code)"
            >
              <span class="greenColor">{{ item.state }}</span>
              <i class="iconfont iconyou1 color999"></i>
            </div>
            <div v-else class="itemRight" @click="seeDetail(item.code)">
              <span class="color666">{{ item.state }}</span>
              <i class="iconfont iconyou1 color999"></i>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'applicationMenu',

  data() {
    return {
      titleText: '功能应用',
      titleExplain:
        '提供可修复项目整体评价的工具，可自主选择使用，功能简单，操作便捷，满足项目监管需求',
      state: 'CLOSE',
      menuList: [
        {
          img: '../../../static/img/functionMarket/employeeIcon.png',
          title: '花名册',
          explain: '身份真伪校验，自动生成进退场名单',
          state: '未启用',
          code: 'employee',
        },
        {
          img: '../../../static/img/functionMarket/attanceIcon.png',
          title: '考勤',
          explain: '支持闸机考勤和移动app考勤两种方式',
          state: '未启用',
          code: 'attance',
        },
        {
          img: '../../../static/img/functionMarket/accountIcon.png',
          title: '工资专户',
          explain: '在线开通工资专户，分账管理，专款专用',
          state: '未启用',
          code: 'account',
        },
        {
          img: '../../../static/img/functionMarket/salaryIcon.png',
          title: '工资代发',
          explain: '在线制作工资台账，支持多种工资代发方式',
          state: '未启用',
          code: 'salary',
        },
        {
          img: '../../../static/img/functionMarket/deposit.png',
          title: '保证金管理',
          explain: '地区工程项目保证金台账管理',
          state: '未启用',
          code: 'securityDeposit',
        },
        {
          img: '../../../static/img/functionMarket/other.png',
          title: '其他应用',
          explain: '项目建档、项目管理、项目预警、投诉举报',
          state: '未启用',
          code: 'other',
        },
      ],
    }
  },
  created() {
    //this.getApplicationState();
  },
  methods: {
    //获取功能启用状态
    getApplicationState() {
      this.axios({
        method: 'post',
        url: '',
        data: '',
      })
        .then(
          (res) => {},
          (res) => {
            this.$message.error('获取状态失败')
          }
        )
        .catch((error) => {
          this.$message.error('获取状态失败')
        })
    },
    //应用开关事件
    changeState(val) {
      if (val === 'OPEN') {
        this.$confirm('确认开启应用市场全部应用？', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.startApplication()
          })
          .catch(() => {
            this.$message({
              message: '已取消',
              type: 'warning',
            })
            this.state = 'CLOSE'
          })
      }
    },
    //查看应用详情
    seeDetail(code) {
      this.$router.push({
        name: 'applicationIntroduction',
        path: '/home/functionMarket/applicationIntroduction',
        query: {
          code: code,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/functionMarket/applicationMenu',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
  //开启全部应用
  startApplication() {
    this.axios({
      method: 'post',
      url: '',
      data: '',
    })
      .then(
        (res) => {
          this.$message({
            type: 'success',
            message: '应用市场开启成功，别忘了给相关的用户角色分配权限!',
          })
          this.menuList.map((item) => (item.state = '已启用'))
        },
        (res) => {
          this.$message.error('应用市场开启失败')
          this.state = 'CLOSE'
        }
      )
      .catch((error) => {
        this.$message.error('应用市场开启失败')
        this.state = 'CLOSE'
      })
  },
}
</script>

<style scoped lang="less">
.greenColor {
  color: #009588;
}
.container {
  .mainCon {
    top: 213px;
    padding: 40px 24px;
    .marketItem {
      height: 94px;
      border: 1px solid #d5dee7;
      margin-bottom: 48px;
      position: relative;
      .itemLeft {
        width: 94px;
        height: 92px;
        img {
          width: 94px;
          height: 92px;
        }
      }
      .itemCenter {
        height: 94px;
        padding: 24px;
        font-size: 14px;
        color: #666;
        .itemTitle {
          font: bold 18px Microsoft YaHei;
          color: #333333;
          line-height: 18px;
          margin-bottom: 10px;
        }
      }
      .itemRight {
        position: absolute;
        right: 24px;
        top: 24px;
        cursor: pointer;
      }
    }
  }
  .switchBox {
    position: absolute;
    top: 150px;
    right: 48px;
    span {
      vertical-align: middle;
      margin-right: 10px;
    }
  }
}
</style>
